<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3496046" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe602;</span>
                <div class="name">购物车满</div>
                <div class="code-name">&amp;#xe602;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe603;</span>
                <div class="name">天猫超市-购物车</div>
                <div class="code-name">&amp;#xe603;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe73c;</span>
                <div class="name">购物车-fill</div>
                <div class="code-name">&amp;#xe73c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe621;</span>
                <div class="name">购物</div>
                <div class="code-name">&amp;#xe621;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe601;</span>
                <div class="name">钱袋</div>
                <div class="code-name">&amp;#xe601;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe604;</span>
                <div class="name">钱 </div>
                <div class="code-name">&amp;#xe604;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe600;</span>
                <div class="name">退格</div>
                <div class="code-name">&amp;#xe600;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8d4;</span>
                <div class="name">240显示、可见</div>
                <div class="code-name">&amp;#xe8d4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8d5;</span>
                <div class="name">241隐藏、不可见</div>
                <div class="code-name">&amp;#xe8d5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66a;</span>
                <div class="name">头像 女孩</div>
                <div class="code-name">&amp;#xe66a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe674;</span>
                <div class="name">头像 女孩</div>
                <div class="code-name">&amp;#xe674;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe678;</span>
                <div class="name">头像 女孩</div>
                <div class="code-name">&amp;#xe678;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6df;</span>
                <div class="name">头像 女孩</div>
                <div class="code-name">&amp;#xe6df;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63e;</span>
                <div class="name">飞船</div>
                <div class="code-name">&amp;#xe63e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62f;</span>
                <div class="name">卡通头像</div>
                <div class="code-name">&amp;#xe62f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe626;</span>
                <div class="name">卡通猫</div>
                <div class="code-name">&amp;#xe626;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe627;</span>
                <div class="name">返回</div>
                <div class="code-name">&amp;#xe627;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe645;</span>
                <div class="name">头像</div>
                <div class="code-name">&amp;#xe645;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe86a;</span>
                <div class="name">箭头</div>
                <div class="code-name">&amp;#xe86a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe677;</span>
                <div class="name">返回首页</div>
                <div class="code-name">&amp;#xe677;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61a;</span>
                <div class="name">密码</div>
                <div class="code-name">&amp;#xe61a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60a;</span>
                <div class="name">用户管理_画板 1</div>
                <div class="code-name">&amp;#xe60a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62b;</span>
                <div class="name">下拉</div>
                <div class="code-name">&amp;#xe62b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe683;</span>
                <div class="name">万圣节</div>
                <div class="code-name">&amp;#xe683;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6dc;</span>
                <div class="name">箭头2</div>
                <div class="code-name">&amp;#xe6dc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6dd;</span>
                <div class="name">箭头4</div>
                <div class="code-name">&amp;#xe6dd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6de;</span>
                <div class="name">箭头3</div>
                <div class="code-name">&amp;#xe6de;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e0;</span>
                <div class="name">箭头1</div>
                <div class="code-name">&amp;#xe6e0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe72a;</span>
                <div class="name">右箭头</div>
                <div class="code-name">&amp;#xe72a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d3;</span>
                <div class="name">相关方人员</div>
                <div class="code-name">&amp;#xe6d3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe75f;</span>
                <div class="name">头像</div>
                <div class="code-name">&amp;#xe75f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe605;</span>
                <div class="name">caret-bottom</div>
                <div class="code-name">&amp;#xe605;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe606;</span>
                <div class="name">caret-left</div>
                <div class="code-name">&amp;#xe606;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe607;</span>
                <div class="name">caret-right</div>
                <div class="code-name">&amp;#xe607;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe608;</span>
                <div class="name">caret-top</div>
                <div class="code-name">&amp;#xe608;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe609;</span>
                <div class="name">d-caret</div>
                <div class="code-name">&amp;#xe609;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60b;</span>
                <div class="name">lock</div>
                <div class="code-name">&amp;#xe60b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60c;</span>
                <div class="name">unlock</div>
                <div class="code-name">&amp;#xe60c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60d;</span>
                <div class="name">user</div>
                <div class="code-name">&amp;#xe60d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60e;</span>
                <div class="name">user-solid</div>
                <div class="code-name">&amp;#xe60e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe610;</span>
                <div class="name">Chevron-Left 2</div>
                <div class="code-name">&amp;#xe610;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe611;</span>
                <div class="name">Chevron-down</div>
                <div class="code-name">&amp;#xe611;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe612;</span>
                <div class="name">Chevron-up</div>
                <div class="code-name">&amp;#xe612;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe613;</span>
                <div class="name">Chevron-Right 2</div>
                <div class="code-name">&amp;#xe613;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe614;</span>
                <div class="name">Chevron-Right</div>
                <div class="code-name">&amp;#xe614;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe615;</span>
                <div class="name">Eye</div>
                <div class="code-name">&amp;#xe615;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe616;</span>
                <div class="name">EyeInvisible</div>
                <div class="code-name">&amp;#xe616;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe617;</span>
                <div class="name">Chevron-Left</div>
                <div class="code-name">&amp;#xe617;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot?t=1656836253788'); /* IE9 */
  src: url('iconfont.eot?t=1656836253788#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAACK4AAsAAAAAQAQAACJoAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACJGgrmVNIIATYCJAOBRAtkAAQgBYRnB4UXG5E0VQd62DgAD8cUJ/v/QwI9RGpS9j0RtnBMdliBpoMhCDJnQDEM9SV2NUgoXJp8eW+yNscIxJRcu0GbhzTpUdyn/n5DKXme//2+7fvs64hrn4anSaxuUgIREoRKiaROPti909exBhIg/2+U2bVQFu2T5ZN0jqxzpZMHDkNFqIAsAEtQLJTVbiK+EX1RawXoGZ53W+//D8paCaKBAwEhhQRnDqYrByDDAMdCU3Lspphnmdm+vLy2rW1tr9OW1WXLyqZe3TBvqd1aJAAY4JwydnxdVMybey1rhqXAgmUHJikGsMAk24HthJu3myHOgnWVruD/Q6X/uUThMhhOi6fLlsBABMz/WqbN5O4KxMe/LEzZ17n/Zzab///MwkzwZ3Mwm6MJDgQWDghdkYWav1uYDU9yRJsrHLCqBXSAukL3+QpZWWFrXF+FqhC2wtVXlw0JXP9JStFN/RlzfQ9X3dSPi5SUcAZK3pm72393FAxduzb34MO3+5mtT5L9zJkF9qaFqHX5hEbOrFglGk7roq/o8nbaKN9Jqq/VML4Fn3z577asUGlr9hbdv3mfO4LBCTD5DPnsnvrXprW+meDNK7Socd6w0uoZv6Y8gJC6c7Uh68iiCguntjWGiVlhxz+CiCNJfLQpwmnznCcTb9+Lfsf+zvtT/PnjdhMwQcl3f/6g5sw3hb/nh+0sTj1idO5vHpR9Zv7/hAf0tIpKZ9uOXXv2LTpw6MixE6fOnLtw6cq1BY1pM5ZMmTRraGTe2LJNK1atmbBuQ23LnL4BpQPQcgzVvVZ/TQAG9AgEaAkMKAShkgoKAB1BA7aJB2CHeAJ2CQawR7CAfYIDLBI84IAQAIeECDgiJMAxoQBOCBVwSmiAM0IHnBMG4ILMAlwSL8AVYUrdobCByqf4A6AhfMA0EQBmiBiwRCSAKRIPmCRawCwpBwxJPWBEmgDzpBkwJm2AZfIEsEneAFbIGGCVjAPWyJeACfIWsM5vkWojUGJBVYOSB4At/pSr5kB5Cqo+KM8gzQDceB28AMojYPoHUMbcxi7FF03fCNyRgyYwQ4gCZPvUDedgZw4TOQ1MA9QkCZ6SmRXgB0AAREbMlAdl7ZNz18K+qWSivF1fB9/yGVufjajrlJX8d1h3rcTY5nZ47K/kZ6LPsFp0rZBnPMtH02IeZQZUgyHCCIWNfMqOZQLMBERrU4dWNCne1RTvvrRz8mxn6xyILMYD6kKSwhrvvQup+0S7lIrgINZjs11b8b4WyiCEkGxKzTlfzilNmq9eg+gxbxUqDf//fIClXDmWWpUjDrxRRvVHyV+1WYGTRkkUOBg5k7XuL+cIYS+U0mptpVNonqKoqnMQPfx6dtQdyVxjN3Jj9GT+ZtdJfjp4Mh7TycgtWGQVc82VgUUslxsz7NCGLDU0BGgeIX4lLpXezoqvC5z8o7oeds7N8jy90MOm3Gk+S2cGAM1BdiUSOiliGQ24WVS8uIDcp3AGmTbbEc+DQhWwEHgdOVhkjL2EkGWycRDPYqt19AUqvghierOUUdnDX81pHx7r7yIFbV/CcNB7sB3vWDco1r5rlTFdAyJltKlhE3hJG3GpAVdU9U0oAKh33I0neXqYDqVYItYVM7oLucS5ztELJnpeW3GpwUW9+hLJuN4iEgZQQ2a7lx7kpief6SqJsZTcND0vKYXQExldF7vxsEwZTs7lhkwviavkOVITYkl3K14Xn67LvgmCuaf8OIuFF1WeiXasIT9bni9vra9Xhkpl4hjXyboSyIQrEdKCwlhvpEwOA4C4Z1AI5zjSoyp6AfJmg2fmDcX0hbWDjPi+r3KtILiKO1F0FbXDcKpWqbl0qCFfFYlOnA5ABahnIi2tzUvzJG5tR84WMsizGuom4KSMEyAF6LDZ094c6FtvyMjV284hjxpGQzkJPVNLjm7MpXTVk8VonXU4UyvOtdjtZsOm/DorWyevm/AnBph/+DUJjrwJeHTsnRMefRu2mDtAo4gHgev7jnvuFpu4QC9O8vHzjjMEmA7Eq5wQFur4fOBoDmS3zvU4G3/Y4ASohlwXwl5WfQzxyYsAHBvVjDf9mpsJyHdyrIyObiCaQawX6xXz5dJr9akr7bXo4rrJVTfXTK64vmY4jS35kLFz+mVtT+O57bd3T8YbnwRLukwBRn7+JBFDiNeYEX617JwuYGQmtm8p486eXJVcY1GgQUOE/KKruYeuhDYCkZdamFidD8oPTEHEjeqJ6huxJXgATKy8sVrkQFsgt/ZIS7cF8MTya6tvNZ7z/YrRuuwKiUILcALimY8WXVxAlwrDttXJ8hI/k2FhBJuapOldHDZsy1aJEi020k9BWcwCv7WTF1hXD83umzFU1UxbN8pVDhlfz47rG8ab7lhB4yWSqU1uBk/ippdgJV1/eb4YXO0Chk0BAE4rjvMN+lOvY1or1gKlgndSVJWsSqJkjXVl4/SSnWlmLzQer36++EWAWm4Zq7fBPb4O1RcIE9WsOqxOYbkB919YO7Py4cuIa8Y7h8o9czZ6Gb6rp0TLLtrh1gtrlf3NqEV+bSrtVm2Ze/Z/ZGAY2sKDt6Vebnrmv76Vv09N8+y22Qg9Snmy5Q55D0uM8czvDspkMsHkOrOG+UeAheH89zoA89fPRoQC0Ap4FC3IhHtfNvv+2qFyoYHTQdB+moDzB54EDVNNCkRVK6rG14Aa+/J+pLq79+l27fjEWqxBYN5arbXSY6GDDXKIa9BXngk2QzVLsLCIkUp64Z35WuvscZGGWzV8p02wo3MT1XCECIEKWGuprjvEyWqxLIqxzezNDomRxYBRb1OEcfUOZVTzIqgvfHsNAcIU9bh0xfywkgAdGWuFrpeU4Lqqqh41vxTjFM0zJxu6oTvrlYl5Qe628cgBUQB4+HT97bl67Gt3DkkDhW6G5UCBtyvt9Ooz/uSylu+Z+YZ8zSQqrEpWjddl62DR+lTH8wDYK1PWQkBzFgXGlYMTKxeylLG7T9nj259By3Jfd6tR1/dmHB/nk+XonPGIpEtnPMFfVMCTrwj1UOG60XNBY2Gy6klT0WzDJGEGEoVu2FlStOKvJvcX5R5VKBwkwzDBgx3QvfyEP7tKr0j0g3vJYi/v0nuv+Is77u3nNnvtvuHv6Nsv+VpvQZ8TpyppZYC6iBFf62NHSlMoP0ddkD9Pn13WnWhhYbNSHsd4Oog2AY9Lqevn/DYYuxfoJscympLN0Fk+7U7Zko+xoHtm8ZauDqqFI9tCYlmOZdtOjbfJIHa8qoxWr2h+Or18GluEVJ4hYP6Zcm84zWGgbKaLkpF5pY5jqxamADUd7kK+nDBlOp7UiQsHlQ16VQKyuNSlINgftlKehy2pfWzTMNz7FDLyePPU4kuaa8nlwLqO+KqI4U45+7qF5WieZ93MUpZwkzxNUzZ0z48vNTb6lr3ugl2pA3phYk0q7YQt2YiJLlIkuprv2GG4pmzTklIXnWxlyEyARpsixK0nQbBsZSP3P2c+mfK1AzmEXRQ08HcRtkjTn8ETvegDdxqh9wvfQ3wWfNiP+njgrkzuB+t4oPHygLUKgXdHqC60PVNArOTHorXZgXgQaBFxu+bX9zXIYW8BQJr72lI50/E8vELZbSYi0+3lDVspfbkQmklmy23qmTVxm+mZqqvgHtMo5FmtsBEMawh17gCouW8QN1MXHBaGAGwWVI3Vjg2o6Xmo8EoImQ6mE7pwzlBBjIMDsnUC5tZ7CthMCZQlzt9oRQwycdZrGhWCtUwZQ4aqVkLFm5gcJ3G2Qorjd3uBez/i6OrZygxSr5lR4mzp6FxXdN/IkQ6yxK6xY7OZoqYzq6k6qUcz7BshM7akKwZzrLZXxOJT5va959bJJEKAlpseQrwKy7gGEG/whsH72VMLqDJ+nSzi71MP3ZMWwHK3IPRc/CxeD3Gwim+AxQ0CHkWc6jAciBBBTK0PrjlMe7yKvE2Cs2HYUcynNVdtb+Z+vTJO5M42pBHoL6PmOg9XcamXCNwkt7ZakMxY6iMVPhESj1vBJfnrPM8I7bPNygSeURbbRpFW7hHUVqRlxHVSel4rs8O16vraImdsjqH4mtmQzVpdWyqFUAXF8YoOFA8No6RJYquUrp+fG9B2KXS/s/u6OGu0LrQN86Qp7mlzLUk2IRgoc5O0mowXq4npq0vkdMO67zh2181VpGwnlia6r6/QHkaUH0/r0T5S9mhd6ePuBzv0hzvLY7NszZXI4p55dr5SRkiYsOwecBDMyOISn54rhG2dnR8SW+LkCm3lBYP23FwVL5U6uHZNByc7+voHe/sG+3qdfsxxuszaSgTLUdOxFc2/97nap4N5vQ/Djf2YCDfL270b1NjY/iDYQGyV0nXhYqt3Jpzfz1f0jr3B7ffPRuHGXBj6tVN+sCFe9fhNlsXSVWmACEr3JF8QqMvhlE9bRkmlgwLGSZfInaX2xJHDfBRF4U6lgBr20njWUf31rkrcy2nw93LWPPfDg3clgUVRPH2tWz5ke29UH1b5C+xRi1qU+uei8aXS6G20vQiiQx6e1zaa+s6vTKpeHMe10bHZKLg4m/LbChVXoB2HUoqf+7bczbT39f/c2zfwQf9Ab/FAX5FW3NvOMhpcT//fpzn4VfH1NxXvjbxeXnTjbeX7J9918awGlnxp5kBt/vzzfaK1B4GlFYHoeVFbe7g3FS43lELTcKLA6vcDNSIThSiOAGLaVjD2dmXBtdefFUUsUmhIFBkIg0VW82MRh8FBT0ldJ5bMJU4O5aZ9UhePZRIpi3b0Bln2EZZj+r6UOZNKCBfhEcE6FMuMYItMKLFsMn0zEee00A32L2Ugd5pORCKVGxrujSXfu59BA5OqQhYOqi0isTZuKTWB+MxuZVXUyhWgTO3GnqM/HyHnTD3h0cPnfWZau/4J4pFN0rPt66p4hWqsYzNLP8Ylrb/hv/YrflZNlxSxJtP54SHDlqmfrS16Rfx/Nf+NV9Y2x/9b87940zTQmxLnN9ecCjM7Kv5/y9Ye+Ofjf1SWFbV/uKQeN1aU6pcrrnDdoZL/aQ7WinRywtNk3KzLzDLG2pFgBZOTbq7kNq5a7XA5QNAm5kyI28nHTBSL2x//Wfxw/D0JikRpoO71OB0SE9KmoJRQCBQHxS/oG48QqJpbkZXU5DZTNwxWxm7eu5LaQAH5CT6acG2ENlzjM0h2ZfXKLn6rryovUEgMYAcQhXgKjtMXsTwsMxDzkhcMnow3/sMJzJwbxuV/ARiVP0PeH5/JUdVD3PMBy95F2aKuWV1vQ0M4OzxJ5XrA3tQLQZtFwckX9W4CvSIXpgI/hUcwq8D/H3y1/3/IID5b7rP8GXt0mc+y0XQCxYtvOIH/Hwfjv9zTl9mBwv2vtRaVZNP4IoxqOFjVENS3X5RrEaf2gb6z4jyLaD7w28eC/Yt6rqyJ3Gy8YhyaVfjU8JhfJTnVMC9q10B2inXh0wmcrGd2d2/e9bqeujl8S+1X47jnv66Wr+pe/PB0wNvh5w0pQenk4l2bw60L1Ev5e5aFmJPDrMtbCbYAnUz1ffeRd/Dj5phjph5542FUg/anzukAVCL2PrUfl8i7LvoC+uKgMEh/u97iGMm4O7hZvipYBR59RhsmqelgqnnYWPygjLma1A78kNpSu8Aa1NnJt/Jz7ns8f0Hn2nelnf8AiIHXZgAutnZ2ZhE0fRCT6XMOpB3w21u9V+9VsGn1rmg6huO1K834MHNnLdvltXcva9OmLqQT2VvDbN203aviGojdfIX5kxfF6yfmFnSgGgNDHH9yR5OHm1q3lYy9t+7WOHitiNGoyF9wXpnCKC/PHaX8pI4/2C+buEj9jvpq05ri3DuXwRvKCfKrCMrwUZIi9l7APcGhz0opwN2StUO57Sg7RdGj237k4KHwiuuVw9uVht3iFJEoxWw4EbOWLt/N3n5Zfnm73EsB/71wOo9xxMxpxJwrer2GlVTbbnATTPfb0cXFaPbl7QVd+3rHPnx4Mzio8k7OukAKV2EM4XGumHh1bLRmI7uCv0wgOgoVFXvPArjBmQ+BI2W5Qhu/q4tvE+aWtcZWRTuLE+lqe4HKa4bbvL6uJnOAqgs2jHwdXlrbu1VdLfWf+TzG30YtoO3d9evtFJnH3lvtRUeeNhx+b8mTFGujnfOqWssEuXzbui4rP0/Y/uQxBYYQdsPczPA/WEvb+0s9onWkmlfQc4hYHaU/ffrF7XX8ffzjgQBAkzyVl72Arv4n2SuVuWc+c07FfyWWvD6vemiO+o+Pv8SgbhdBM1QioGIhICoTciUzPIgO+Uur1ep8RaMVrEdqQrM2XHsOjYGtvXWW8G9v8C2E7LpV3Zdv7iXE6L6tAq8g0gX/VjZuLL61yUOe/Geqf24h9cyZDwGKfDWYSAYQRCKn/nn7m5N7b/EKqQE5MZ/PQB/OAL4OS/XA/j0DKgRbliuw8td1BdkEuaU5XBPHULN6vrgSpwBtG5zga0Hv3taaFpJBaLr+bXhpXe/WSc/zG3PG1+M1+OT1tzTohFH0cwAp9hsjKzWKamV9R2knCV2euQIaPQNXCSp/iwT8yT2A+xMOdnu82Tya8DZST6x6BUYBj4XCeqGVZhdGzWQ13HjDh6Hq6d3G/fuN+xRQQE8oSDyucmNroDZZQ1fRzo1UNJjAc/TmNx7uYBhTDcFHkzlzgXNDG8V6Yjxn43nPyck/hjYsOjflhSWwR8Hrzvr3QlnEs5v8bLxlS/fB218/Mo+sAa8AsSpS73Kp0edW4JMJmhXjizYM/THZGQyHHFFMOxp0TdYLtup6/Ll+OQT4QGN+iOsqoDEEruNbhXllrvyUVMYsgK0LB3NIXMyuzaz80EhV10DQciTV9LC8wm5LixUWJ8aMlmRXmTAvyLpunU3h/TJLPU8uXz0MMt6du32+lw0UzjhlBcc0kwZF5oeyWAWhFx/CLPmJmXq6l3N/rqVluBaGZZWE/QfROGQMR1nhjEt42ykxgIWujFraz1xluTNOwe5N+vtRPPixY7HWhKQuDxroUkH3+PGP/Nr/bVe8y7hUIHI2l8vLU43AHmoahyDATQEA+n0uqoPSRyaAIGyiGAJAyCFCH/JetaUIZR4jLX4d5Mo/r0yMwH5QVlhRaZTKZGh1ESLH/C32ulhHFAD6B0h5As3r00EIlAqkULulGvbpes27zq85v44iLTnfK792dvSlJNZlxR4dxA4CVi0evui8109g0HN0jddC64pVjd+9szE/SGAEik2z2SvKF29f3PHjlXMHKN8E9pCxk5O09++ngwPxNu2/krCwLCAxdAJdQShr8y4MDUTdZ5JDyMyVTHeom3nVy8MjvP9vVcqq3/3e3WpenJR17xSd3RbZsQxq/47Eu8oja8g9OM4buTXPJ20n+/3ZNQDoZ4fKHnox3V4+0pJT2lMlUjJzmkn3fsHZxED4NPGv2StkTvNaxyLgdKyqAacstzCcdN4aUdCKwtuGFW0dmCOe8zyPYKh5DNedL+d/0438sS5qlH4q9hSacSruFCC2yETPo549Gbyucm1oM9aMK8E57GgHVihc+GpCxkB4KP2QoMHV+VWcG3GxcTdiR0JiQ0Yqdwf2iZLEfYl94iRRX8A435FeklaS7si1V3OexM2LexI74hkjVbt5vVnO703SBeZ0k+NhXiiNMAYnCbVaYZLoiOFEhdp36PChIHhwsBG+3Tp/zuLkkiJO6xPPF6emiFI+i3AqIC5JE6e4ZpdnqgVKPl/BV+/yiHylMkgl2A2nlK9ERBH4FaSPhRoDZoykY2Qj0BR6F3lrgJZyJMaZMQbsQcTQNl6HsyvbaFfZMrlMpparWWb8OGN81hRj6i1LTOvg7TRR5jkECAguXUT5B2Eru0nymxd2GOZkSzOVSCWywpZaHJknW3vAu+IpwWc/kiZSRyK5PjTvOlrRjj+gjAd9qDbeLtVHMuOhBjKL541/VuF9oEWzMHJODeaj7/wiTNhESabIEdn25i6ihj0NjTgMBQOdzdR7zMvqEujtRX1SQFD06fnvSjEA0XpkwY04JByBZOiUGyqahiGdxTD4bRbpMZrScwpptSWr/u+kVIXvD4+bixyxSf+9rtCrCEsipP8sXnlW7LLN7YS9gr3eeKSvmL9zfw8ZyU5x0p3cA3Anx8wsbQxtLGXyaMm0+4FmHjWZymOWNoU2laKYLNwYw6nQYY8TEn2uFUt0iQfj/H/VqFEpjPqAzI8EfkEQ/25b7NEUQqNRtTw5Trro+zZnZ4aG/W2eWVavSFa2NJiTiWvFJeoWmTL8YEhZtCa+sVqXhP80WmLTEir18c3auLmLrPpzKvaKv5prAgrorvtC7WwW4HzKfX0x6OJr7qccAMxDmhlqI8WX0ki9Q2kqYIZ+AzD8FHHC20TyHWqj50Q05bvd3N1/cf/ysnwXSopmQRIqi0y5CqW1RlmYxRIm+13WsKplHwTxMd8LlAcXo+vSLp4/7+HJh8ejxPCYGco+gmpQjCosqHJyqv2hx54cdPOEIgntg3d3K3SSwiDPf/D7Tpf13pl9zUIppdZQmijJAh21iWzR6XpOw8PYGr14lKcd/7KXSnUSiU5qlValLjTfwSiPkt6hbBzG87InmmFTRuP3gGpTWXT8/zsmjoDts7OlofpMSQ6o30OQ6nYH0WfIOrtjtgY7jJUH+vNQ/pxts8NisW+wmtmHORYhBW1CYV4foW3c04i1KHBn2v4zwKhG3ju0A63ZMs7btTJPdClasbLsQfaW4KiVyroOuOtSNrpkSRSHSPV2SrADR4HtDtz+NQVROZGROVEFXxnOC+dEFkR9lejPuWnMMNW0Y4eJ1k8179ju+HgHlpLvvR5c6jAIpAspEX5Oa4/wzw+Dlx0On6COn4hDX2Cro47RbRhmnaYYe/8e29DRQ3KcVlygolbIQIQ08j5uGreFqYL/0ecc9wS9VqjiC9RCre6Rvq0ClUqgFe5NXiQQqHqjf6TLXKPia4W6hzEF0dEFMY9i0FAQVZ8fFbnlR4MgUVRETk5EleFEqsg/ZrM5+3Vqjso3vWge89RsO2cD0yetuD0adF98yNnG8Q0sfMn8pKY9qXTcc3FNCBMA+kACOpArUxSgsxlHGbw6umcAhwJv5xtlavSxdGNIdmAhufrxQnwloR60AyvOjDMUkgrs/sa5BcvoDIhvfOGPEMwwtEkT8RfdI6AoX64fVkjp0TVB8lxYqWT8uLDeSSzGn67tIi8tyPLPFHt3BBjjBNsZ6v8KyuevorpDPMpvnpVXyYlB0dXJK4cTbhwpzDNxIyerZR4E4wtjvMAq1YVaOIZOUleRTkCDq5XTRXgnvgYsByfpBVY/g/Qjb3tSSvTtYgzJ7JKTgibzcu/GR1ZZ0D6rqY17Ck7fTN1WlEg1cTr8j4T0xGDqDWLDQa+lSiRi25mn2WSo7wb1lyTy7z9joT/8Jz6cboyAivyp/A96ajorNIKllehJESB3EcqB+gSgTIhQCBv90lBpHihTb+cnEHYMtwhzwpXumYHG3MNEB2PGdvluhoJ4KahktAOVX127coG5aYuQOTtMdZDlOxtgS0eAL7DrevdKByH0QDShF9B+MUrsJ9Pc/ZBZlTkRtvBwW0TOG8N6YVt4TsSbBAfd19IyHNjB6y+wzf28jsDhlpb8srskTRGFQxMTzsKIJpGon6n399CVjOTSp89Mpv4Pd2WJ7k0mkagpomBozc/SV+/fn5BW1muAXzt7+d9pJfqsSBRkYNK9Jj8Hq4RUIfo69LucPNlSTSBRRrKTZMRAoJEtz89TXebFPkl+EguSQ25IUUE3Q9ouQSnaJYtTk4GHT5olKYlLQfKc+EEZCahiGyrSlFhSgC/vMTFOB0ridYSz/2OjlMOMlacNVq9mQe3z73ML5q6A1KQ1hVs9QHWOWB+cnhr2cqOv8MsLPlaxPofRz3DhovRcDxb6RYUpRDZtZLBKkp5pYl0mVhW9jZvncMxbYjiRJST+h/FOhHLU2Y0RJ/KcPuFim9h52Ycz5O3thzp9hA9d8IHfHHlsk9CunpvWbSQGEF0YG//wzZ5v9HFcy1OadZHtvusDx5ZyQ7XZXPelY1RLoGQgKi8yMq/acCLVJObpdn3dInlTwIA7oUUM7B6AmxNAy4Ar6k54sAsmNzdB4VJ0FfhyQNxEEpWkEEsSUluYMC6MyRWoybs48mCVboMk/+HdCkhfUaFvDC0IV8VAghPesAF2uoAr4D1/63p3PuezFaceKrFoDdHkAImK/LwgNnBBOdVr7HQbeYeJZwbuFjGziJQiRfkqIuQWa2xElS9IGJTzBSTkQ+oFC9TQoOGUQOpkAuAmQLkrVuQ2htZKUG70ZLM/30PMzSMCaeH+KfGYaOq1bZ4SjYmn3O5hU0a3ponGU5wdS8rDDnb3WAy8DvSko+zmFhWhwJ0jy/HXvinxfSz1RreVl4d1H+ypeiZxGwHbvqeWaw4eDCgv34YSjraEhmRkhNgNJ2InJlMI0+EITU9mIDWRaky3GYJ0vJWrhNmCJ6rjfRZ74WC2uvOT1ZFFBSt8J/y1DjAVPWp1T1qaJTmsUmBa5koPyOSdyAj46p/g+e/G4uiFWm0h/YkGyPMPOc9b09Le9YskfQmWTF56wDKXwCSwaDRr+kfD8w458333a9SJLDlLKwf72qG1uG2eCwDg7kH+RnLBLityC/4WAPfgm4iSvrgcvty/rcgSJB4AdyvyF1LrfgFxw/28i1th180vHoT/jLegEARwG2YNLnGhQAsAkHa4WIT8AGL34SdlBoGbR0cjopvH9yIBxq/1YSQG6u5ejkiALhSBgJ5skgMA5CP4VMD2wQb0nDEjSCAUs+q+3414oWyj8D+AewBpRVJ2mgJ+qAPwHniQDoHgUgWsiPkhoCsKWyUQ0kJfaiLIfnliufA5eLQclhex4CniXXoMPhb7FB5AwoXA/4VnBDeHFOvyyLG/YfCo10Yw/h6aHZS7/+vWaoAB8sYgAP7nm9lRMKfAPbvnCQDMRf3tdC4wKjFThNAQ6JECyxPOO79BUujWuVA5iDRgAADOWQmA/yIfRwPjaofouUWPYKiAORQGnsBnKAIwIEBADREN3X5r5HZop+9u6NCZ912PzKnMK80Ah553Q4tpP4dWJv0kNWvIL9LAkH9DW4v+kw6GvAwdel42ezdyWNTbAJIhF1knUJHXDnPwRm/BJCdD2pRHCBExSYz6w9PGj+AhVJEj1mbMrIUOVIoPxpaBcySqQAUo7lvm6nww0CzffUXlzFsBkBjICZnOuzdSiKcXz/Rn7xYwEkcKOYVHFkRNRG9cGOkb5hA+yj7XbBuSHNWMMUZME5gE1FASPlgMuKc6IlRsowDUU6zPljAq5wbO4nReuS8+VA44Wb+bo33K3LwNwCEgoaBhYOHgEUCISMgQYUIZF1JpY50PMeXyIfi41NbHXPvc9wMZW39LqUnKQin9EaP0pSRlJUWLzPBGWKfRucWYuvwjVzyXuBAkLXJCA5vtAZVgT1CEb7LdoVfSmyzRdLXXtOkxRF4jFaMtI7WnqOo2mVIFfONrK3FFAyqbqkH1R5kQ5MxUuP3xkpbeJlx+8/r2893962UhKIuykcaPllIHCyWWcr/TmE2mKubwe40TM+lXclpGy75uUpuDJ+FxeMb0/Mlqi9ForaMUkw9kEesjOjAC+C49B2XsZEPJANzLiJnKtVi9A83rZrOAxvKqMRpTtZz3UhYcqael5H3bQooQ1twcvUgO823Ze2uhDoqTb5WUjzeoxpwav6ZvlKqdPPRWwKrjzbgx/76DDfwRPvsaI2YONmrUZmYAAAA=') format('woff2'),
       url('iconfont.woff?t=1656836253788') format('woff'),
       url('iconfont.ttf?t=1656836253788') format('truetype'),
       url('iconfont.svg?t=1656836253788#iconfont') format('svg');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont icon-gouwucheman"></span>
            <div class="name">
              购物车满
            </div>
            <div class="code-name">.icon-gouwucheman
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tianmaochaoshigouwuche"></span>
            <div class="name">
              天猫超市-购物车
            </div>
            <div class="code-name">.icon-tianmaochaoshigouwuche
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gouwuchefill"></span>
            <div class="name">
              购物车-fill
            </div>
            <div class="code-name">.icon-gouwuchefill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gouwu"></span>
            <div class="name">
              购物
            </div>
            <div class="code-name">.icon-gouwu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-qiandai"></span>
            <div class="name">
              钱袋
            </div>
            <div class="code-name">.icon-qiandai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-qian"></span>
            <div class="name">
              钱 
            </div>
            <div class="code-name">.icon-qian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tuige"></span>
            <div class="name">
              退格
            </div>
            <div class="code-name">.icon-tuige
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xianshikejian"></span>
            <div class="name">
              240显示、可见
            </div>
            <div class="code-name">.icon-xianshikejian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yincangbukejian"></span>
            <div class="name">
              241隐藏、不可见
            </div>
            <div class="code-name">.icon-yincangbukejian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test"></span>
            <div class="name">
              头像 女孩
            </div>
            <div class="code-name">.icon-icon-test
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test1"></span>
            <div class="name">
              头像 女孩
            </div>
            <div class="code-name">.icon-icon-test1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test-copy"></span>
            <div class="name">
              头像 女孩
            </div>
            <div class="code-name">.icon-icon-test-copy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-touxiangnvhai"></span>
            <div class="name">
              头像 女孩
            </div>
            <div class="code-name">.icon-touxiangnvhai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-feichuan"></span>
            <div class="name">
              飞船
            </div>
            <div class="code-name">.icon-feichuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-qiatongtouxiang"></span>
            <div class="name">
              卡通头像
            </div>
            <div class="code-name">.icon-qiatongtouxiang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test2"></span>
            <div class="name">
              卡通猫
            </div>
            <div class="code-name">.icon-icon-test2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fanhui"></span>
            <div class="name">
              返回
            </div>
            <div class="code-name">.icon-fanhui
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-BARISTA"></span>
            <div class="name">
              头像
            </div>
            <div class="code-name">.icon-BARISTA
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiantou"></span>
            <div class="name">
              箭头
            </div>
            <div class="code-name">.icon-jiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fanhuishouye"></span>
            <div class="name">
              返回首页
            </div>
            <div class="code-name">.icon-fanhuishouye
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mima"></span>
            <div class="name">
              密码
            </div>
            <div class="code-name">.icon-mima
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yonghuguanli_huaban"></span>
            <div class="name">
              用户管理_画板 1
            </div>
            <div class="code-name">.icon-yonghuguanli_huaban
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiantou1"></span>
            <div class="name">
              下拉
            </div>
            <div class="code-name">.icon-jiantou1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-nvwumao"></span>
            <div class="name">
              万圣节
            </div>
            <div class="code-name">.icon-nvwumao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiantou2"></span>
            <div class="name">
              箭头2
            </div>
            <div class="code-name">.icon-jiantou2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiantou4"></span>
            <div class="name">
              箭头4
            </div>
            <div class="code-name">.icon-jiantou4
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiantou3"></span>
            <div class="name">
              箭头3
            </div>
            <div class="code-name">.icon-jiantou3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiantou11"></span>
            <div class="name">
              箭头1
            </div>
            <div class="code-name">.icon-jiantou11
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-youjiantou"></span>
            <div class="name">
              右箭头
            </div>
            <div class="code-name">.icon-youjiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiangguanfangrenyuan"></span>
            <div class="name">
              相关方人员
            </div>
            <div class="code-name">.icon-xiangguanfangrenyuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-touxiang"></span>
            <div class="name">
              头像
            </div>
            <div class="code-name">.icon-touxiang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-caret-bottom"></span>
            <div class="name">
              caret-bottom
            </div>
            <div class="code-name">.icon-caret-bottom
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-caret-left"></span>
            <div class="name">
              caret-left
            </div>
            <div class="code-name">.icon-caret-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-caret-right"></span>
            <div class="name">
              caret-right
            </div>
            <div class="code-name">.icon-caret-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-caret-top"></span>
            <div class="name">
              caret-top
            </div>
            <div class="code-name">.icon-caret-top
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-d-caret"></span>
            <div class="name">
              d-caret
            </div>
            <div class="code-name">.icon-d-caret
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-lock"></span>
            <div class="name">
              lock
            </div>
            <div class="code-name">.icon-lock
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-unlock"></span>
            <div class="name">
              unlock
            </div>
            <div class="code-name">.icon-unlock
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-user"></span>
            <div class="name">
              user
            </div>
            <div class="code-name">.icon-user
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-user-solid"></span>
            <div class="name">
              user-solid
            </div>
            <div class="code-name">.icon-user-solid
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-Chevron-Left2"></span>
            <div class="name">
              Chevron-Left 2
            </div>
            <div class="code-name">.icon-a-Chevron-Left2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Chevron-down"></span>
            <div class="name">
              Chevron-down
            </div>
            <div class="code-name">.icon-Chevron-down
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Chevron-up"></span>
            <div class="name">
              Chevron-up
            </div>
            <div class="code-name">.icon-Chevron-up
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-Chevron-Right2"></span>
            <div class="name">
              Chevron-Right 2
            </div>
            <div class="code-name">.icon-a-Chevron-Right2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Chevron-Right"></span>
            <div class="name">
              Chevron-Right
            </div>
            <div class="code-name">.icon-Chevron-Right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Eye"></span>
            <div class="name">
              Eye
            </div>
            <div class="code-name">.icon-Eye
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-EyeInvisible"></span>
            <div class="name">
              EyeInvisible
            </div>
            <div class="code-name">.icon-EyeInvisible
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Chevron-Left"></span>
            <div class="name">
              Chevron-Left
            </div>
            <div class="code-name">.icon-Chevron-Left
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gouwucheman"></use>
                </svg>
                <div class="name">购物车满</div>
                <div class="code-name">#icon-gouwucheman</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tianmaochaoshigouwuche"></use>
                </svg>
                <div class="name">天猫超市-购物车</div>
                <div class="code-name">#icon-tianmaochaoshigouwuche</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gouwuchefill"></use>
                </svg>
                <div class="name">购物车-fill</div>
                <div class="code-name">#icon-gouwuchefill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gouwu"></use>
                </svg>
                <div class="name">购物</div>
                <div class="code-name">#icon-gouwu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qiandai"></use>
                </svg>
                <div class="name">钱袋</div>
                <div class="code-name">#icon-qiandai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qian"></use>
                </svg>
                <div class="name">钱 </div>
                <div class="code-name">#icon-qian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tuige"></use>
                </svg>
                <div class="name">退格</div>
                <div class="code-name">#icon-tuige</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xianshikejian"></use>
                </svg>
                <div class="name">240显示、可见</div>
                <div class="code-name">#icon-xianshikejian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yincangbukejian"></use>
                </svg>
                <div class="name">241隐藏、不可见</div>
                <div class="code-name">#icon-yincangbukejian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test"></use>
                </svg>
                <div class="name">头像 女孩</div>
                <div class="code-name">#icon-icon-test</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test1"></use>
                </svg>
                <div class="name">头像 女孩</div>
                <div class="code-name">#icon-icon-test1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test-copy"></use>
                </svg>
                <div class="name">头像 女孩</div>
                <div class="code-name">#icon-icon-test-copy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-touxiangnvhai"></use>
                </svg>
                <div class="name">头像 女孩</div>
                <div class="code-name">#icon-touxiangnvhai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-feichuan"></use>
                </svg>
                <div class="name">飞船</div>
                <div class="code-name">#icon-feichuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qiatongtouxiang"></use>
                </svg>
                <div class="name">卡通头像</div>
                <div class="code-name">#icon-qiatongtouxiang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test2"></use>
                </svg>
                <div class="name">卡通猫</div>
                <div class="code-name">#icon-icon-test2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fanhui"></use>
                </svg>
                <div class="name">返回</div>
                <div class="code-name">#icon-fanhui</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-BARISTA"></use>
                </svg>
                <div class="name">头像</div>
                <div class="code-name">#icon-BARISTA</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiantou"></use>
                </svg>
                <div class="name">箭头</div>
                <div class="code-name">#icon-jiantou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fanhuishouye"></use>
                </svg>
                <div class="name">返回首页</div>
                <div class="code-name">#icon-fanhuishouye</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mima"></use>
                </svg>
                <div class="name">密码</div>
                <div class="code-name">#icon-mima</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yonghuguanli_huaban"></use>
                </svg>
                <div class="name">用户管理_画板 1</div>
                <div class="code-name">#icon-yonghuguanli_huaban</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiantou1"></use>
                </svg>
                <div class="name">下拉</div>
                <div class="code-name">#icon-jiantou1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-nvwumao"></use>
                </svg>
                <div class="name">万圣节</div>
                <div class="code-name">#icon-nvwumao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiantou2"></use>
                </svg>
                <div class="name">箭头2</div>
                <div class="code-name">#icon-jiantou2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiantou4"></use>
                </svg>
                <div class="name">箭头4</div>
                <div class="code-name">#icon-jiantou4</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiantou3"></use>
                </svg>
                <div class="name">箭头3</div>
                <div class="code-name">#icon-jiantou3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiantou11"></use>
                </svg>
                <div class="name">箭头1</div>
                <div class="code-name">#icon-jiantou11</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-youjiantou"></use>
                </svg>
                <div class="name">右箭头</div>
                <div class="code-name">#icon-youjiantou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiangguanfangrenyuan"></use>
                </svg>
                <div class="name">相关方人员</div>
                <div class="code-name">#icon-xiangguanfangrenyuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-touxiang"></use>
                </svg>
                <div class="name">头像</div>
                <div class="code-name">#icon-touxiang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-caret-bottom"></use>
                </svg>
                <div class="name">caret-bottom</div>
                <div class="code-name">#icon-caret-bottom</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-caret-left"></use>
                </svg>
                <div class="name">caret-left</div>
                <div class="code-name">#icon-caret-left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-caret-right"></use>
                </svg>
                <div class="name">caret-right</div>
                <div class="code-name">#icon-caret-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-caret-top"></use>
                </svg>
                <div class="name">caret-top</div>
                <div class="code-name">#icon-caret-top</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-d-caret"></use>
                </svg>
                <div class="name">d-caret</div>
                <div class="code-name">#icon-d-caret</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lock"></use>
                </svg>
                <div class="name">lock</div>
                <div class="code-name">#icon-lock</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-unlock"></use>
                </svg>
                <div class="name">unlock</div>
                <div class="code-name">#icon-unlock</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-user"></use>
                </svg>
                <div class="name">user</div>
                <div class="code-name">#icon-user</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-user-solid"></use>
                </svg>
                <div class="name">user-solid</div>
                <div class="code-name">#icon-user-solid</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-Chevron-Left2"></use>
                </svg>
                <div class="name">Chevron-Left 2</div>
                <div class="code-name">#icon-a-Chevron-Left2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Chevron-down"></use>
                </svg>
                <div class="name">Chevron-down</div>
                <div class="code-name">#icon-Chevron-down</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Chevron-up"></use>
                </svg>
                <div class="name">Chevron-up</div>
                <div class="code-name">#icon-Chevron-up</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-Chevron-Right2"></use>
                </svg>
                <div class="name">Chevron-Right 2</div>
                <div class="code-name">#icon-a-Chevron-Right2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Chevron-Right"></use>
                </svg>
                <div class="name">Chevron-Right</div>
                <div class="code-name">#icon-Chevron-Right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Eye"></use>
                </svg>
                <div class="name">Eye</div>
                <div class="code-name">#icon-Eye</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-EyeInvisible"></use>
                </svg>
                <div class="name">EyeInvisible</div>
                <div class="code-name">#icon-EyeInvisible</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Chevron-Left"></use>
                </svg>
                <div class="name">Chevron-Left</div>
                <div class="code-name">#icon-Chevron-Left</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
